html,
body {
	width: 100%;
	height: 100%;
}

body {
	background: #eee;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #000;
	margin: 0;
	padding: 0;
}
@keyframes ro{
	from{transform: rotate(0);}
	to{transform: rotate(360deg);}
}
.ro{
	animation: ro infinite linear both;
	animation-duration: 5s;
}
.swiper-wrapper {
	transition-delay: .3s;
}

.swiper-container {
	width: 100%;
	height: 100vh;
	margin: 0px auto;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.text {
	color: #fff;
	font-size: 16px;
	position: relative;
	margin-top: 10vh;
}

.a-1 {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	width: 100%;
}

.a-0 {
	position: absolute;
	top: 0%;
	right: 0;
	width: 40%;
}

.a-2 {
	position: absolute;
	right: 0;
	bottom: -14%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
}

.a-3 {
	position: absolute;
	top: 40%;
	left: 0;
	right: 0;
	width: 80%;
}

.flicker-out-1 {
	-webkit-animation: flicker-out-1 2s linear both;
	animation: flicker-out-1 2s linear both
}

@keyframes flicker-out-1 {0% {opacity: 1}13.9% {opacity: 1}14% {opacity: 0;}14.9% {opacity: 0;}15% {opacity: 1}22.9% {opacity: 1}23% {opacity: 0;}24.9% {opacity: 0;}25% {opacity: 1}34.9% {opacity: 1}35% {opacity: 0;}39.9% {opacity: 0;}40% {opacity: 1}42.9% {opacity: 1}43% {opacity: 0;}44.9% {opacity: 0;}45% {opacity: 1}50% {opacity: 1}54.9% {opacity: 1}55% {opacity: 0;}69.4% {opacity: 0;}69.5% {opacity: 1}69.9% {opacity: 1}70% {opacity: 0;}79.4% {opacity: 0;}79.9% {opacity: 1}80% {opacity: 0;}89.8% {opacity: 0;}89.9% {opacity: 1;}90% {opacity: 0;}100% {opacity: 0}}

.myfadein {
	animation: myfadein;
	opacity: 0;
}

.myfadein2 {
	animation: myfadein2 both;
}

@keyframes myfadein {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes myfadein2 {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@keyframes mv {
	0% {
		opacity: 0;
		top: 72%;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		top: 84%;
	}
}

@keyframes aup {
	from {
		opacity: 0;
	}

	10% {
		opacity: 1;
		transform: translateY(0) scale3d(1, 1, 1);
	}

	30% {
		transform: translateY(10%) scale3d(1.05, .8, 1);
	}

	50% {
		transform: translateY(-50%) scale3d(1, 1.1, 1);
	}

	65% {
		transform: translateY(0) scale3d(1, 1, 1);
	}

	75% {
		transform: translateY(8%) scale3d(1.08, .84, 1);
	}

	85% {
		transform: translateY(6%) scale3d(1.05, .88, 1);
	}

	90%,
	to {
		transform: none;
	}
}

.aup {
	animation: aup infinite both;
}

.mv {
	animation: mv;
	opacity: 0;
}

.a,
.b {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.a-21 {
	position: absolute;
	top: 72%;
	width: 5%;
	left: 48%;
}

.up {
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -15px;
	width: 30px;
}



.active2 {
	position: relative;
}

.active2::after {
	content: "";
	transition: all .5s;
	position: absolute;
	top: -9px;
	left: 50%;
	width: 90%;
	height: 30px;
	transform: translateX(-71%);
	background-image: url(images/select.png);
	background-position: center;
	background-size: cover;
	opacity: 1;
}

.info {
	text-align: center;
	z-index: 9999999;
	line-height: 1;
	margin: 50vh auto;
	width: 50vh;
}

.tit {
	color: #cdd0f1;
	font-size: 14px;
}

.ti {
	font-size: 18px;
	color: #fff;
}

.pink {
	color: #fff;
	font-size: 16px;
	text-align: center;
	width: 100%;
}

.a-4 {
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	width: 100%;
}

.tip {
	color: #ccc5f0;
	font-size: 14px;
	width: 80%;
	margin: 0 auto;
	background-color: #655b9a;
	line-height: .5;
	padding: 6px;
	border-radius: 5px;
}

@keyframes mvlin {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(100%);
	}
}

.a2 {
	position: absolute;
	width: 100%;
	top: 0;
	left: -100%;
}

.mvlin {
	animation: mvlin .5s linear, move 5s linear 1s infinite;
}
